@using System.Web.Script.Serialization

@{
    Layout = "~/Views/Shared/_contentLayout.cshtml";
}

<style>
    .formLabel 
    {
        float: left;
        display: block;
        text-align: right;
        width: 100px;
        font-weight: bold;
    }
    .formField
    {
        float: left;
        margin: -2px 2px 20px 10px;
    }
    .fieldInfo
    {
        display: block;
        font-size: 11px;
    }
    form 
    {
        width: 800px;
        padding: 10px 2px 2px 2px;
    }
</style>

<script type="text/javascript">
    var character = @Html.Raw(new JavaScriptSerializer().Serialize(Model))
    var tags = new Object();

    function save() {
        $.jsonSave('Save', character, function(newCharacter){character = newCharacter;});
    }

    $(function() {
        $('#full_name').val(character.FullName);
        $('#full_name').change(function() {character.FullName = $('#full_name').val();});

        $('#gender').val(character.Gender);
        $('#gender').change(function() {character.Gender = $('#gender').val();});
        character.Gender = $('#gender').val();

        $('#bio').val(character.Bio);
        $('#bio').change(function() {character.Bio = $('#bio').val();});

        var repository = new Repository();
        repository.get({Target: 'Tag' }, function(results) {
            var data = $.map(results, function(element) {
                tags[element.Object.Name] = element.Object.Id;
                return {value: element.Object.Id, name: element.Object.Name};
            });
            var prefill = $.map(character.Tags, function(element) {
                return {value: element.Tag.Id, name: element.Tag.Name};
            });

            $('#tags').autoSuggest(data, {
                preFill: prefill,
                selectedItemProp: 'name',
                searchObjProps: 'name',
                selectionAdded: function (element) {
                    var tagName = $(element).text();
                    tagName = $.trim(tagName.substring(1, tagName.length));

                    if ($.inArray(tagName, $.map(character.Tags, function(element) { return element.Tag.Name; })) != -1) return;

                    character.Tags[character.Tags.length] = {Id: 0, Tag: {Id: tags[tagName], Name: tagName}};
                },
                selectionRemoved: function (element) {
                    var tagName = $(element).text();
                    tagName = $.trim(tagName.substring(1, tagName.length));

                    var indexToRemove = $.inArray(tagName, $.map(character.Tags, function(element) { return element.Tag.Name; }));
                    character.Tags = $.grep(character.Tags, function(value) {
                        return value.Tag.Name != tagName;
                    });
                    element.remove();
                    console.log(character.Tags);
                    return false;
                }
            });
        });

        repository.get({ Target: 'RelationshipType' }, function(results) {
            $(results).each(function (index, element) {
                var relationshipName = element.Object.ToMaleName == element.Object.ToFemaleName
                    ? element.Object.ToMaleName
                    : element.Object.ToMaleName + '/' + element.Object.ToFemaleName;
                $('#relationshipType').append($('<option value="' + element.Object.Id
                    + '" reverseRelationshipTypeId="' + element.Object.ReverseRelationshipTypeId
                    + '" maleName="' + element.Object.ToMaleName
                    + '" femaleName="' + element.Object.ToFemaleName + '">'
                        + relationshipName + '</option>'));
            });
        });
        repository.get({ Target: 'Character' }, function (results) {
            var prepopulateTokens = new Array();

            var dropdownTokens = $.map(results, function(element) {
                $(character.Relationships).each(function(index, elem) {
                    if (elem.RelatedCharacterId == element.Object.Id) {
                        var relationshipTypeName = element.Object.Gender == 'M' ? elem.RelationshipType.ToMaleName : elem.RelationshipType.ToFemaleName;
                        prepopulateTokens[prepopulateTokens.length] = {id: element.Object.Id, name: relationshipTypeName + ': ' + element.Object.FullName};
                    }
                });
                
                return {id: element.Object.Id, name: element.Object.FullName, gender: element.Object.Gender};
            });

            $('#relationships').tokenInput(dropdownTokens, {
                onAdd: function(item) {
                    if (item.id < 0) return;

                    var relationshipTypeId = $('#relationshipType').val();
                    var maleName = $("#relationshipType option:selected").attr('maleName');
                    var femaleName = $("#relationshipType option:selected").attr('femaleName');
                    var reverseRelationshipTypeId = $('#relationshipType option:selected').attr('reverseRelationshipTypeId');
                    var relationshipTypeName = item.gender == 'M' ? maleName : femaleName;

                    $('#relationships').tokenInput('remove', {name:item.name});
                    $('#relationships').tokenInput('add', {id:item.id * -1, name:relationshipTypeName + ': ' + item.name});
                    character.Relationships.push({RelationshipType: {Id: relationshipTypeId, ToMaleName: maleName, ToFemaleName: femaleName, ReverseRelationshipTypeId: reverseRelationshipTypeId}, RelatedCharacterId: item.id});
                },
                onDelete: function(item) {
                    character.Relationships = $.grep(character.Relationships, function(element) {
                        return element.RelatedCharacterId != item.id;
                    });
                },
                prePopulate: prepopulateTokens
            });

        });
    });
</script>

<a href="javascript: save()" style="float: right;">Save</a>
<br style="clear: both"/>

<div style="float: left">
    Image goes here
</div>
<div style="float: left; width: 200px;">
    <form>
        <label class="formLabel">Name</label>
        <input class="formField" type="text" name="full_name" id="full_name" />
        <br style="clear: both"/>

        <label class="formLabel">Gender</label>
        <select id="gender" class="formField">
            <option value="M">Male</option>
            <option value="F">Female</option>
        </select>
        <br style="clear: both"/>

        <label class="formLabel">Bio
        <span class="fieldInfo">Enter a short bio for the character</span>
        </label>
        <textarea class="formField" rows="10" cols="50" name="bio" id="bio"></textarea>
        <br style="clear: both"/>

        <label class="formLabel">Relationships</label>
        <div class="formField">
            <select id="relationshipType">
            </select>
            <input type="text" name="relationships" id="relationships" />
        </div>
        <br style="clear: both"/>

        <label class="formLabel">Tags</label>
        <div class="formField" style="width: 400px;">
            <input type="text" id="tags" />
        </div>
        <br style="clear: both"/>
    </form>
</div>